<template>
	<cl-crud ref="crud" @load="onLoad" :on-refresh="onRefresh">
		<el-row style="height: 100%" type="flex">
			<cl-biz-toolbar v-model="currBiz.biz_id" :show-hq="false" @change="bizChange" />
			<cl-flex1 class="h-100" style="overflow: hidden">
				<cl-pagefull @resize="onResize">
					<template #head>
						<el-row type="flex">
							<div class="title">{{ currBiz.biz_name }}</div>
							<cl-flex1 />
							<div class="pr-1">
								<cl-filter-group v-model="search" :on-search="onSearch">
									<cl-filter label="关键字">
										<el-input
											v-model="search.keyword"
											placeholder="门店名称"
											clearable
											style="width: 200px"
											@change="refresh()"
										/>
									</cl-filter>
									<cl-filter label="经营状态">
										<cl-select
											v-model="search.bus_state"
											style="width: 100px"
											placeholder="请选择经营状态"
											filterable
											clearable
											@change="refresh()"
										>
											<el-option label="全部" value="" />
											<el-option label="营业" :value="1" />
											<el-option label="停业" :value="2" />
										</cl-select>
									</cl-filter>
									<cl-filter label="战区">
										<cl-cascader
											clearable
											v-model="search.appoint_dept_id"
											:options="zone"
											:props="{
												value: 'dept_id',
												label: 'dept_name',
												checkStrictly: true
											}"
											filterable
											@change="changeAppointDept"
										/>
									</cl-filter>
								</cl-filter-group>
								<!-- <el-button icon="el-icon-s-tools" type="primary" @click="openBrandForm()">
									门头品牌配置
								</el-button> -->
								<el-button icon="el-icon-plus" size="small" type="primary" @click="openForm()">
									新增门店
								</el-button>
								<el-button @click="exportFile" size="small">
									<icon-svg name="icon-download-3" />
								</el-button>
							</div>
						</el-row>
					</template>
					<!-- 数据表格 -->
					<div style="height: 100%" ref="tableBox">
						<cl-table v-bind="table" id="EarnestReceiveForm">
							<cl-empty slot="empty" />

							<template #column-dept_name="{ scope: { row } }">
								<el-row type="flex">
									{{ row.dept_name }}
									<el-tag
										:type="$constFilter(row.ctype, 'CTYPE_LIST', 'type')"
										v-if="row.ctype != 1"
										class="ml-1"
									>
										{{ row.ctype | constFilter("CTYPE_LIST") }}
									</el-tag>
									<el-tooltip
										v-if="row.activity_list.length"
										class="item"
										effect="dark"
										:content="
											`开始时间：${row.activity_list[0].begin_time}，结束时间：${row.activity_list[0].end_time}`
										"
										placement="top-start"
									>
										<el-tag class="ml-1">专场</el-tag>
									</el-tooltip>
								</el-row>
							</template>
							<template #column-bus_state_name="{ scope: { row } }">
								<el-tag :type="row.bus_state == 1 ? '' : 'danger'">{{
									row.bus_state_name
								}}</el-tag>
							</template>

							<template #column-ele_status="{ scope: { row } }">
								<el-tag v-if="row.ums_reg_id">
									{{ row.ele_status | eleStatus }}
								</el-tag>
								<el-tag v-else type="warning">待申请</el-tag>
							</template>
							<template #column-opt="{ scope: { row } }">
								<div class="flex flex-align-start">
									<el-button type="primary" @click="allot(row)">
										分配店长
									</el-button>
									<el-button type="warning" class="ml-1" @click="edit(row)">
										编辑
									</el-button>
									<el-button type="danger" class="ml-1" @click="remove(row)">
										删除
									</el-button>
								</div>
							</template>
						</cl-table>
					</div>
					<template #foot>
						<el-row type="flex">
							<cl-flex1 />
							<zm-pagination v-bind="pagination" />
						</el-row>
					</template>
				</cl-pagefull>
			</cl-flex1>
		</el-row>
		<allot-store-user ref="allot" @confirm="refresh" />
		<cl-shop-form ref="form" @confirm="refresh" />
	</cl-crud>
</template>

<script>
//分配店长
import AllotStoreUser from "./components/store/allot-store-user";
// 门店表单
// import StoreForm from "./components/store/store-form";

import { pageList } from "@/utils";
import { exportExcelCoustom } from "@/utils/excel";
export default {
	name: "CrmPersonnelStore",
	components: {
		AllotStoreUser
		// StoreForm
	},
	data() {
		return {
			list: [],
			total: 0,
			page: 1,
			size: 20,
			isRefresh: true,
			pagination: {
				on: {
					"size-change": size => {
						this.size = size;
						this.isRefresh = false;
						this.$refs.crud.refresh();
					},
					"current-change": page => {
						this.page = page;
						this.isRefresh = false;
						this.$refs.crud.refresh();
					}
				}
			},
			// 表格配置
			table: {
				"context-menu": ["refresh"],
				props: {
					maxHeight: 500
				},
				columns: [
					{
						label: "门店名称",
						prop: "dept_name",
						minWidth: 220,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "大区",
						prop: "first_zone",
						minWidth: 100,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "战区",
						prop: "war_zone",
						minWidth: 100,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "店长",
						prop: "manage_name",
						minWidth: 90,
						align: "left",
					},
					{
						label: "门店地址",
						prop: "store_address",
						minWidth: 220,
						align: "left",
						showOverflowTooltip: true
					},
					{
						label: "营业时间",
						prop: "opening_time",
						width: 120,
						align: "left",
						showOverflowTooltip: true,
						formatter: row => row.btime + "-" + row.etime
					},
					// { label: "联系电话", prop: "manage_mobile", width: 120 },
					{
						label: "房间数",
						prop: "beds",
						width: 80,
						formatter: row => (row.beds || "").split(",").filter(Boolean).length
					},
					{ label: "床位数", prop: "bed", width: 80 },
					// { label: "门店类型", prop: "ctype_name", width: 300 },
					{ label: "经营状态", prop: "bus_state_name", width: 80 },
					{ label: "操作", prop: "opt", width: 250, fixed: "right" }
				]
			},
			search: {
				keyword: "",
				// parent_id: 0,
				showpage: 1,
				bus_state: "",
				biz_id: "",
				first_zone_id: "",
				war_zone_id: ""
			},
			currBiz: { biz_id: "" },
			load: false,
			zone: []
		};
	},
	filters: {
		eleStatus(v) {
			if (v == 0) {
				return "申请中";
			}
			if (v == 1) {
				return "已通过";
			}
			return "-";
		}
	},
	created() {
		this.currBiz.biz_id = this.getCurrBiz();
		this.search.biz_id = this.currBiz.biz_id;
		this.getFirstZone()
	},
	methods: {
		onResize(h) {
			this.table.props.maxHeight = h;
		},
		onLoad({ ctx, app }) {
			ctx.service(this.$service.shop).done();
			if (!this.load) return;
			app.refresh();
		},
		onSearch(form, { next }) {
			console.log("onSearch");
			this.isRefresh = true;
			next(form);
		},
		async onRefresh(params, { next, done, render }) {
			const { biz_id } = this.currBiz;
			let query = {
				...params,
				...this.search,
				biz_id
			};
			const { page, size } = this;
			console.log("onRefresh");
			if (this.isRefresh) {
				let { list, pagination } = await next(query);
				this.list = list;
				console.log(this.list);
				this.total = pagination.total;
			}

			let data = pageList(page, size, this.list);
			render(data, {
				...query,
				page,
				size,
				total: this.total
			});
		},
		// crud刷新
		refresh(biz_id, reset = true) {
			biz_id && (this.currBiz.biz_id = biz_id);
			if (reset) {
				this.page = 1;
			}
			this.isRefresh = true;
			this.$refs.crud.refresh();
			this.load = true;
		},
		// 切换事业部
		bizChange(v) {
			this.currBiz = v;
			this.search.keyword = "";
			this.$nextTick(() => {
				this.refresh();
			});
		},
		//分配
		async allot(row) {
			this.$refs.allot.open(row);
		},
		openForm(type = "add", data) {
			this.$refs.form.open(type, data);
		},
		openBrandForm() {
			this.$refs.brandSet.open();
		},
		//编辑
		edit(row) {
			this.openForm("edit", row);
		},
		// 删除
		remove({ dept_id }) {
			this.confirm()
				.then(async () => {
					await this.$service.shop.remove({ dept_id });
					this.$message.success("操作成功");
					this.refresh();
				})
				.catch(() => {});
		},
		// 导出EXCEl
		exportFile() {
			// exportExcel("#EarnestReceiveForm");
			exportExcelCoustom("门店列表", this.list, this.table.columns);
		},
		async getFirstZone() {
			const { biz_id } = this.search;
			this.zone = await this.$service.dept.preDept({
				parent_id: 0,
				biz_id,
				post: 7
			});
		},
		changeAppointDept(e) {
			this.search.first_zone_id = e[0]
			this.search.war_zone_id = e[1] || ""
		}
	}
};
</script>
<style lang="scss" scoped>
.title {
	font-size: 18px;
}
</style>
